﻿/* Import Settings */
@import url('setting.less');

/**
*	Hendrix (HTML)
*	Copyright © Hendrix by beshleyua. All Rights Reserved.
**/

/* TABLE OF CONTENTS
	1. Header
	2. Section
	3. Started
	4. About
	5. Services
	6. Portfolio
	7. Contacts
	8. Footer
	9. Popups
*/

/* 1. Header */
.header {
	padding: 30px 35px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	opacity: 1;
	visibility: visible;
	.transition(@default-transition);
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom,rgba(0,0,0,0.6) 0,rgba(0,0,0,0) 100%);
	}
	.logo {
		position: relative;
		float: left;
		font-family: @extra2-font;
		font-size: 32px;
		line-height: 46px;
		font-weight: 600;
		a {
			color: @white-color;
		}
	}
	.menu-btn {
		margin-top: 10px;
		position: relative;
		float: right;
		display: none;
		width: 24px;
		height: 24px;
		.transition(@default-transition);
		@media (max-width: 1079px) {
			display: block;
		}
		span {
			margin-top: -1px;
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 2px;
			background: @white-color;
			.transition(@default-transition);
			&:before, &:after {
				content: '';
				position: absolute;
				left: 0;
				top: -8px;
				width: 100%;
				height: 2px;
				background: @white-color;
				.transition(@default-transition);
			}
			&:after {
				top: auto;
				bottom: -8px;
			}
		}
		&.active {
			margin-right: 225px;
			span {
				background: none!important;
				&:before {
					top: 0;
					.transform(rotate(45deg));
				}
				&:after {
					bottom: 0;
					.transform(rotate(-45deg));
				}
			}
		}
	}
	.top-menu {
		float: right;
		display: none;
		.transition(@default-transition);
		&.active {
			right: 0;
			display: block!important;
		}
		ul {
			li {
				margin-left: 40px;
				padding-top: 15px;
				display: inline-block;
				vertical-align: top;
				a {
					padding: 2px 0 0 0;
					position: relative;
					display: block;
					font-size: @extra-small-size;
					color: @extra-color;
					letter-spacing: 0.1em;
					font-weight: 500;
					line-height: 14px;
					text-transform: uppercase;
					.transition(@default-transition);
					.box-shadow(inset 0 0 0 @active-color);
				}
				&:hover, &.active {
					a {
						color: @dark-color;
						.box-shadow(inset 0 -6px 0 @active-color);
					}
				}
			}
		}
		@media (max-width: 1079px) {
			padding: 50px 30px;
			position: fixed;
			top: 0;
			right: -230px;
			width: 230px;
			height: 100%;
			background: @white-color;
			ul {
				li {
					margin-left: 0;
					margin-bottom: 15px;
					display: block;
					a {
						display: inline-block;
						color: @dark-color;
					}
				}
			}
			.close {
				display: block;
			}
		}
	}
	&.filled {
		padding: 25px 35px;
		background: @white-color;
		.box-shadow(@default-box-shadow);
		&:before {
			opacity: 0;
		}
		.logo {
			a {
				color: @dark-color;
			}
		}
		.menu-btn {
			span {
				background: @dark-color;
				&:before, &:after {
					background: @dark-color;
				}
			}
		}
		.top-menu {
			display: block;
		}
	}
}

/* 2. Section */
.section {
	padding: 120px 0;
	position: relative;
	@media (max-width: 720px) {
		padding: 40px 0;
	}
	&.gray {
		background: @light-color;
	}
	.titles {
		.title {
			font-family: @extra2-font;
			color: @dark-color;
			font-size: @h4-size;
			line-height: @h4-size + 10;
			font-weight: 400;
			@media (max-width: 1079px) {
				font-size: 28px;
			}
		}
	}
}

/* 3. Started */
.section.started {
	padding: 0;
	background: @dark-color;
	.slide {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.st-title, .typed-title {
		position: relative;
		margin: 30px 50px 15px 50px;
		font-size: @title-size;
		line-height: @title-size;
		color: @white-color;
		font-weight: 600;
		letter-spacing: @extra-letter-spacing;
		.transition(@default-transition);
		p {
			margin: 0;
		}
	}
	.typed-cursor {
		display: none;
	}
	.socials {
		margin: 0 50px;
		a {
			margin: 0;
			border: none;
			.icon {
				color: @white-color;
			}
			&:hover {
				border: none;
				opacity: 0.6;
				.icon {
					color: @white-color;
				}
			}
		}
	}
	.mouse-btn {
		margin-left: -10px;
		text-align: center;
		position: absolute;
		width: 20px;
		height: 40px;
		left: 50%;
		bottom: 40px;
		.icon {
			position: relative;
			top: 0px;
			font-size: @default-icon-size;
			color: @white-color;
			animation: mouse-anim 1s ease-out 0s infinite;
		}
	}
	@media (max-width: 1080px) {
		.st-title, .typed-title {
			margin-left: 20px;
			margin-right: 20px;
			font-size: 86px;
			line-height: 86px;
		}
	}
	@media (max-width: 720px) {
		.st-title, .typed-title {
			margin-left: 5px;
			margin-right: 5px;
			font-size: 44px;
			line-height: 44px;
		}
		.socials {
			margin: 0;
			a {
				width: 38px;
				height: 38px;
				line-height: 36px;
			}
		}
	}
}

/* 4. About */
.section.about {
	.profile {
		img {
			width: 100%;
			display: block;
		}
	}
	@media (max-width: 1079px) {
		h1 {
			font-size: 40px;
			line-height: 50px;
		}
		br {
			display: none;
		}
	}
	@media (max-width: 480px) {
		.profile {
			margin-bottom: 25px;
		}
		h1 {
			font-size: 30px;
			line-height: 40px;
		}
	}
}

/* 5. Services */
.section.services {
	.service-item {
		margin-top: 25px;
		.circle {
			height: 48px;
			.icon {
				font-size: 44px;
				line-height: 48px;
				color: @active-color;
			}
		}
		.name {
			margin: 10px 0;
			position: relative;
			font-size: @small-size;
			color: @dark-color;
			letter-spacing: 0.1em;
			font-weight: 500;
			text-transform: uppercase;
		}
		p {
			margin: 0;
			font-size: @small-size;
			line-height: @extra-line-height;
		}
	}
}

/* 6. Portfolio */
.section.works {
	.filters {
		margin-top: 25px;
		font-size: 0;
		input {
			display: none;
		}
		.f_btn {
			margin: 0 40px 0 0;
			position: relative;
			display: inline-block;
			vertical-align: top;
			@media (max-width: 1079px) {
				margin: 0 30px 0 0;
			}
			@media (max-width: 480px) {
				margin: 0 30px 15px 0;
			}
			label {
				padding: 0;
				position: relative;
				display: block;
				font-size: @default-size;
				color: @extra-color;
				line-height: 16px;
				cursor: pointer;
				z-index: 2;
				@media (max-width: 1079px) {
					font-size: 15px;
					line-height: 12px;
				}
			}
			&.active {
				label {
					color: @active-color;
				}
			}
		}
	}
}

.box-items {
	position: relative;
	.box-item {
		margin: 40px 0 0 0;
		position: relative;
		&:hover {
			.desc {
				.transform(translateY(-10px));
			}
		}
		@media (max-width: 1079px) {
			margin: 40px 0 0 0;
		}
		.desc {
			.transition(all 0.3s ease 0s);
			.transform(translateY(0px));
		}
		.image {
			position: relative;
			a {
				position: relative;
				display: block;
				font-size: 0;
				img {
					position: relative;
					display: block;
					width: 100%;
					height: auto;
				}
			}
		}
	}
}

/* 7. Contacts */
.contact-form {
	margin-top: 25px;
}

.alert-success {
	display: none;
	p {
		margin: 60px 0 30px 0;
		font-size: @large-size;
		color: @dark-color;
	}
}

/* 8. Footer */
footer {
	padding: 120px 0 60px 0;
	background: @light-color;
	@media (max-width: 720px) {
		padding: 40px 0;
	}
	.copy {
		font-size: @small-size;
		color: @default-color;
	}
}

.socials {
	position: relative;
	margin: 0 0 20px 0;
	text-align: center;
	a {
		margin: 0 6px;
		position: relative;
		display: inline-block;
		vertical-align: top;
		overflow: hidden;
		width: 42px;
		height: 42px;
		line-height: 42px;
		text-align: center;
		border: 1px solid #ccc;
		.transition(@default-transition);
		.border-radius(42px);
		.icon {
			font-size: @extra-icon-size;
			color: @dark-color;
			.transition(@default-transition);
		}
		&:hover {
			border: 1px solid @dark-color;
			.icon {
				color: @dark-color;
			}
		}
	}
}

/* 9. Popups */
.popup-box {
	margin: 30px auto;
	padding: 10px;
	position: relative;
	width: 620px;
	background: @white-color;
	.border-radius(10px);
	.box-shadow(@default-box-shadow);
	@media (max-width: 580px) {
		width: 440px;
	}
	@media (max-width: 480px) {
		width: 320px;
	}
	.image {
		img {
			width: 100%;
			height: auto;
		}
	}
	.desc {
		padding: 30px 20px;
		.category {
			margin: 20px 0 10px 0;
			display: inline-block;
			vertical-align: top;
			font-size: @small-size;
			color: @default-color;
			line-height: 12px;
			.box-shadow(inset 0 -6px 0 @active-color);
			@media (max-width: 1079px) {
				font-size: @extra-small-size;
			}
		}
		h4 {
			margin: 0 0 15px 0;
			display: block;
			font-family: @default-font;
			color: @dark-color;
			font-size: @h5-size;
			line-height: 1.4;
			@media (max-width: 1079px) {
				font-size: 22px;
			}
		}
		p {
			margin: 0 0 30px 0;
		}
	}
	.mfp-close {
		background: @white-color;
		opacity: 1;
	}
}

.mfp-fade.mfp-bg {
	opacity: 0;
	background: @white-color;
	.transition(@default-transition);
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.88;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	.transition(@default-transition);
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}